<template>
  <div class="">
    <!-- <h1>{{ msg }}</h1> -->
    <!-- 事件修饰符  -->
    <!-- v-on:click.stop='handle' 阻止事件冒泡   v-on:click.prevent 阻止默认事件（跳转）-->
    <!-- 按键修饰符 -->
    <!-- v-on:click.keyup.enter   -->
    <!-- 自定义按键修饰符 -->
    <!-- 定义全局对象 config.keyCodes.f1 = 112  -->
    <!-- <input type="number" placeholder="数值1" v-model="num1" />
    <input type="number" placeholder="数值2" v-model="num2" /> -->
    <!-- <button @click="add">添加</button>
    <button @click="del">删除</button>
    <button @click="change">替换</button>
    <div>{{ result }}</div>
    <ul v-for="(item, index) in list" :key="index">
      <li>{{ item }}</li>
    </ul> -->

    <div>
      <h1>图书管理</h1>
      <div>
        <div class="boxmanger">
          <label for="id">编号：</label>
          <input
            v-model="id"
            type="text"
            id="id"
            :disabled="isdisabled"
            v-focus
          />
          <label for="name">名称：</label>
          <input v-model="name" type="text" id="name" />
          <button @click.prevent="handle">提交</button>
        </div>
      </div>
    </div>

    <table cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in books" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.date | format("yyyy-MM-dd HH:mm:ss") }}</td>
          <td>
            <a href="" @click.prevent="editTap(item.id)">修改</a>
            |
            <a href="" @click.prevent="deleteTap(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import Vue from "vue";
Vue.directive("focus", {
  inserted: function(el) {
    el.focus();
  }
});
Vue.filter("format", function(value, arg) {
  //采用正则格式化日期
  function dateFormat(date, fmt) {
    date = new Date(parseInt(date));
    var o = {
      "M+": date.getMonth() + 1, //月份
      "d+": date.getDate(), //日
      "H+": date.getHours(), //小时
      "h+": date.getHours(), //小时
      "m+": date.getMinutes(), //分
      "s+": date.getSeconds(), //秒
      "q+": Math.floor((date.getMonth() + 3) / 3), //季度
      S: date.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(
        RegExp.$1,
        (date.getFullYear() + "").substr(4 - RegExp.$1.length)
      );
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          RegExp.$1.length == 1
            ? o[k]
            : ("00" + o[k]).substr(("" + o[k]).length)
        );
      }
    }
    return fmt;
  }
  return dateFormat(value, arg);
});
export default {
  // name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      isdisabled: false,
      // num1: 0,
      // num2: "",
      // list: ["1", "2", "3"]
      name: "",
      id: "",
      books: [
        {
          id: "1",
          name: "三国演义",
          date: "1584687811000"
        },
        {
          id: "2",
          name: "红楼梦",
          date: "1584687811000"
        },
        {
          id: "3",
          name: "水浒传",
          date: "1584687811000"
        },
        {
          id: "4",
          name: "西游记",
          date: "1584687811000"
        }
      ]
    };
  },
  methods: {
    add() {
      this.list.push(this.num2);
    },
    del() {
      this.list.pop();
    },
    change() {
      this.list = this.list.slice(0, 2);
    },
    handle() {
      if (this.isdisabled) {
        this.books.some(item => {
          if (item.id == this.id) {
            item.name = this.name;
            return true;
          }
        });
        this.isdisabled = false;
      } else {
        var book = {};
        book.id = this.id;
        book.name = this.name;
        book.date = "";
        this.books.push(book);
        // window.console.log(this.books);
      }
      this.id = "";
      this.name = "";
    },
    editTap(id) {
      this.isdisabled = true;
      var book = this.books.filter(function(item) {
        return item.id == id;
      });
      this.id = book[0].id;
      this.name = book[0].name;
    },
    deleteTap(id) {
      // var index = this.books.findIndex((item)=> {
      //   return item.id == id;
      // });
      // this.books.splice(index, 1);
      this.books = this.books.filter(item => {
        return item.id != id;
      });
    }
    //修改响应式数据
    // Vue.set(arr.info,'gender','nv')
    // vm.$set(arr.info,'gender','nv')
  },
  mounted() {},
  computed: {
    result() {
      return parseInt(this.num1) + parseInt(this.num2);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
input {
  display: block;
  width: 200px;
}

table {
  border: 1px solid orange;
  width: 600px;
}

thead {
  color: #000;
  font-weight: 600;
  background: orange;
}

tr > th {
  padding: 10px;
}

tr > td {
  padding: 5px 10px;
  border: 1px dotted orange;
}

.boxmanger {
  width: 580px;
  display: flex;
  background: orange;
  padding: 10px;
}

.boxmanger > input {
  margin-right: 10px;
}
</style>
